<template>
  <div class="dashboard-editor-container">
    <div class="greet">
      <div class="title">你好！{{$store.state.user.name}}：</div> 
      <div class="subtitle">欢迎使用{{settings.title}}。</div>
    </div>
    <panel-group
      @handleSetLineChartData="handleSetLineChartData"
      :panelData="panelGroupData"
      :play="play"
    />

    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 16px">
      <el-col :span="18">
        <bar-chart
          :BXdata="BXdata"
          :BSdata="BSdata"
          :BSname="BSname"
          :rend="rend"
        ></bar-chart>
      </el-col>
      <el-col :span="6">
        <pie-chart :PLdata="PLdata" :PSdata="PSdata" :rend="rend"></pie-chart>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        stripe
        :data="tableData"
        :header-cell-style="{ background: '#F6F8FB' }"
        :max-height="maxHeight"
        v-scrollbar="'.el-table__body-wrapper'"
      >
        <template v-for="column in tableColumns">
          <el-table-column
            :key="column.id"
            :label="column.label"
            :prop="column.prop"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-if="column.prop == 'name'"
                class="link-type"
                @click="jumpTo(scope.row)"
                >{{ scope.row[column.prop] }}</span
              >
              <span
                v-else-if="
                  ['stateid', 'typeid', 'policyid'].includes(column.prop)
                "
                >{{ dataFormat(column.prop, scope.row[column.prop]) }}</span
              >
              <span v-else>{{ scope.row[column.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import BarChart from "./dashboard/BarChart";
import PieChart from "./dashboard/PieChart";
import { getDataList } from "@/api/dynamic/dynamic";
export default {
  inject: ["app"],
  name: "Index",
  components: {
    PanelGroup,
    PieChart,
    BarChart,
  },
  data() {
    return {
      allData: {},
      panelGroupData: {
        mydoc:{
          icon:'form',
          name:'mydoc'
        },
        mypro:{
          icon:'job',
          name:'mypro'
        },
        mytask: {
          icon: 'post',
          name: 'mytask'
        },
        mywbs:{
          icon:'dict',
          name:'mywbs'
        },
        mygrp:{
          icon:'list',
          name:'mygrp'
        }
      },
      chartData: {},
      play: false,
      currentChartData: {},
      currrntType: "",
      BXdata: [],
      BSdata: [],
      BSname: "",
      PLdata: [],
      PSdata: [],
      rend: false,
      tableData: [],
      tableColumns: [
        {
          label: "名称",
          prop: "name",
        },
        {
          label: "类型",
          prop: "typeid",
        },
        {
          label: "策略",
          prop: "policyid",
        },
        {
          label: "状态",
          prop: "stateid",
        },
        {
          label: "描述",
          prop: "description",
        },
        {
          label: "创建时间",
          prop: "createTime",
        },
        {
          label: "修改时间",
          prop: "modifyTime",
        },
      ],
      pageParams: {
        mydoc: { treeMenu: "type_Doc" },
        mypro: { treeMenu: "type_project" },
        mywbs: { treeMenu: "type_WBS" },
        mytask: { treeMenu: 'type_reimbursement'}
      },
      jumpType: {
        mydoc: "/doc",
        mypro: "/pmsproject",
        mywbs: "/pmswbs",
        mytask: '/reimbursement/user'
      },
    };
  },
  created() {
    this.getAllData();
  },
  computed: {
    maxHeight() {
      return this.app.screenHeight - 560;
    },
  },
  methods: {
    getAllData() {
      let BXdata = [];
      let BSdata = [];
      let PLdata = [];
      let PSdata = [];
      let typeOptions = {};
      let optionData = JSON.parse(sessionStorage.getItem("optionsData"));
      optionData.typeOptions.forEach((item) => {
        typeOptions[item.id] = item;
      });
      let handle = false
      getDataList("/doc/mydoc").then((response) => {
        this.allData["mydoc"] = response.rows;
        for (let row of response.rows) {
          // if (row.typeid) {
            BXdata.push(row.name);
            BSdata.push(row.fileList.length);
            let index = PLdata.indexOf(typeOptions[row.typeid].description);
            if (index == -1) {
              PLdata.push(typeOptions[row.typeid].description);
              PSdata.push({
                name: typeOptions[row.typeid].description,
                value: 1,
              });
            } else {
              PSdata[index].value++;
            }
          // }
        }
        this.chartData.mydoc = {
          BSname: "文件数量",
          BXdata: BXdata,
          BSdata: BSdata,
          PLdata: PLdata,
          PSdata: PSdata,
        };
        this.panelGroupData.mydoc.total = response.total;
        this.panelGroupData.mydoc.title = "我的文档";
        // this.handleSetLineChartData("mydoc");
        if(!handle && response.total){
          handle = 'mydoc'
        }
        getDataList("/pmsproject/mylist").then((response) => {
          BXdata = [];
          BSdata = [];
          PLdata = [];
          PSdata = [];
          this.allData["mypro"] = response.rows;
          for (let row of response.rows) {
            if (row.typeid) {
              BXdata.push(row.name);
              BSdata.push(row.estimated);
              let index = PLdata.indexOf(typeOptions[row.typeid].description);
              if (index == -1) {
                PLdata.push(typeOptions[row.typeid].description);
                PSdata.push({
                  name: typeOptions[row.typeid].description,
                  value: 1,
                });
              } else {
                PSdata[index].value++;
              }
            }
          }
          this.chartData.mypro = {
            BSname: "持续时间",
            BXdata: BXdata,
            BSdata: BSdata,
            PLdata: PLdata,
            PSdata: PSdata,
          };
          this.panelGroupData.mypro.total = response.total;
          this.panelGroupData.mypro.title = "我的项目";
          if(!handle && response.total){
            handle = 'mypro'
          }
          getDataList("/reimbursement/invoice/myReimbursementWorkflow").then((response) => {
            BXdata = [];
            BSdata = [];
            PLdata = [];
            PSdata = [];
            this.allData["mytask"] = response.rows;
            for (let row of response.rows) {
              if (row.typeid) {
                BXdata.push(row.name);
                BSdata.push(row.estimated);
                let index = PLdata.indexOf(typeOptions[row.typeid].description);
                if (index == -1) {
                  PLdata.push(typeOptions[row.typeid].description);
                  PSdata.push({
                    name: typeOptions[row.typeid].description,
                    value: 1,
                  });
                } else {
                  PSdata[index].value++;
                }
              }
            }
            this.chartData.mytask = {
              BSname: "持续时间",
              BXdata: BXdata,
              BSdata: BSdata,
              PLdata: PLdata,
              PSdata: PSdata,
            };
            this.panelGroupData.mytask.total = response.total;
            this.panelGroupData.mytask.title = "待我审批的报销";
            if(!handle && response.total){
              handle = 'mytask'
            }
            getDataList(
              "/pmsproject/myExecuteWbs?stateNames=Create,Assign,Active"
            ).then((response) => {
              BXdata = [];
              BSdata = [];
              PLdata = [];
              PSdata = [];
              this.allData["mywbs"] = response.rows;
              for (let row of response.rows) {
                if (row.typeid) {
                  BXdata.push(row.name);
                  BSdata.push(row.estimated);
                  let index = PLdata.indexOf(typeOptions[row.typeid].description);
                  if (index == -1) {
                    PLdata.push(typeOptions[row.typeid].description);
                    PSdata.push({
                      name: typeOptions[row.typeid].description,
                      value: 1,
                    });
                  } else {
                    PSdata[index].value++;
                  }
                }
              }
              this.chartData.mywbs = {
                BSname: "持续时间",
                BXdata: BXdata,
                BSdata: BSdata,
                PLdata: PLdata,
                PSdata: PSdata,
              };
              this.panelGroupData.mywbs.total = response.total;
              this.panelGroupData.mywbs.title = "我的WBS";
              if(!handle && response.total){
                handle = 'mywbs'
              }

              getDataList("/pmsproject/projectgroup").then((response) => {
                BXdata = [];
                BSdata = [];
                PLdata = [];
                PSdata = [];
                this.allData["mygrp"] = response.rows;
                for (let row of response.rows) {
                  if (row.typeid) {
                    BXdata.push(row.name);
                    BSdata.push(row.estimated);
                    let index = PLdata.indexOf(
                      typeOptions[row.typeid].description
                    );
                    if (index == -1) {
                      PLdata.push(typeOptions[row.typeid].description);
                      PSdata.push({
                        name: typeOptions[row.typeid].description,
                        value: 1,
                      });
                    } else {
                      PSdata[index].value++;
                    }
                  }
                }
                this.chartData.mygrp = {
                  BSname: "持续时间",
                  BXdata: BXdata,
                  BSdata: BSdata,
                  PLdata: PLdata,
                  PSdata: PSdata,
                };
                this.panelGroupData.mygrp.total = response.total;
                this.panelGroupData.mygrp.title = "我的项目组合";
                if(!handle && response.total){
                  handle = 'mygrp'
                }
                this.handleSetLineChartData(handle)
                this.play = true;
                // this.rend = !this.rend;
              });
            });
          });
        });
      });
    },
    handleSetLineChartData(type) {
      if (type != this.currrntType) {
        if (type == "mydoc") this.tableColumns[4].prop = "title";
        else this.tableColumns[4].prop = "description";
        this.tableData = this.allData[type];
        this.currrntType = type;
        this.BSname = this.chartData[type].BSname;
        this.BXdata = this.chartData[type].BXdata;
        this.BSdata = this.chartData[type].BSdata;
        this.PLdata = this.chartData[type].PLdata;
        this.PSdata = this.chartData[type].PSdata;
        this.rend = !this.rend;
      }
    },
    jumpTo(row) {
      let params = {};
      params.pageParams = this.pageParams[this.currrntType];
      params.rowParams = row;
      params.type = this.jumpType[this.currrntType];
      params.pageParams.url = "/" + params.type + "/{id}";
      this.$router.push({ path: "/dynamic/details/" + row.id, query: params });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 10px;
  background-color: #F1F6FB;
  background: #F1F6FB url(../assets/image/pic.png) no-repeat fixed 10px 97px;
  background-size: contain;
  position: relative;
  height: 100%;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.greet{
  padding: 10px 0;
  .title{
    font-size: 24px;
    text-indent: 1em;
    line-height: 42px;
  }
  .subtitle{
    font-size: 18px;
    color: #333;
    text-indent: 1em;
    line-height: 32px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
